<template>
	<view>
		<!-- 
		 <view @click="getMapLocation" class="head flex-y-center">
		 	<image src="@/static/img/dw.png" class="dwicon"></image>
		 	<view>{{address||'未获取定位，请手动选择'}}</view>
		 	<image src="@/static/img/bjiantou.png" class="icon"></image>
		 </view>-->
		<!-- <navigator url="/pages/map/map" class="head flex-y-center">
			<image src="@/static/img/dw.png" class="dwicon"></image>
			<view>{{address||'未获取定位，请手动选择'}}</view>
			<image src="@/static/img/bjiantou.png" class="icon"></image>
		</navigator> -->
		<view @click="gotoMap" class="head flex-y-center">
			<image src="@/static/img/dw.png" class="dwicon"></image>
			<view>{{address||'定位中...'}}</view>
			<image src="@/static/img/bjiantou.png" class="icon"></image>
		</view>
		<view class="placeholder"></view>
		<navigator url="/pages/search/search" class="flex-y-center search">
			<image src="@/static/img/sousuo.png" class="icon"></image>
			<view class="flex-grow-1">输入搜索关键词</view>
		</navigator>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper class="banner-container" autoplay="true" circular="true" interval="3000" duration="1000"
				previous-margin="50rpx" next-margin="50rpx" @change="cIndex">
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item>
						<image @click="jumpUrl(item);" class="slide-image"
							:class="[ currentIndex === index ? 'active':'' ]" :src="item.image">
						</image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 导航 -->
		<!-- <view class="menu-navigation">
			<swiper style="height: 100%;">
				<swiper-item class="flex">
					<view v-for="(item,index) in nav_list" :key="index" class="menu-lg" @click="jumpUrl(item);">
						<image :src="item.image">
						</image>
						<view>{{item.title}}</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="add-c-d">
				<view style="display: inline-block;">
					<view class="add-f-s-1"></view>
				</view>
			</view>
		</view> -->
		<!-- 美团红包 -->
		<view class="flex-bet redPacket">
			<view @click="hongbao_url(hongbao.meituan_url);" class="item" v-if="hongbao.meituan_img">
				<image :src="hongbao.meituan_img" class="img" mode="widthFix"></image>
			</view>
			<view @click="hongbao_url(hongbao.elem_url);" class="item" v-if="hongbao.elem_img">
				<image :src="hongbao.elem_img" class="img" mode="widthFix"></image>
			</view>
		</view>
		<!-- 一元霸王餐 -->
		<navigator url="/pages/storeList/storeList?tag=3" hover-class="none" class="limit-store-container">
			<view class="header" style="text-align: center;font-size: 18px;line-height:36px;display: block;">
				{{tag_3.name}}
				<!-- <image class="header-icon" style="width: 96px;" :src="tag_3.image">
				</image>
				<view class="right">
					<text class="more-text">查看更多</text>
					<image style="width: 15px; height: 15px;" src="@/static/img/arrowBlack.png">
					</image>
				</view> -->
			</view>
			<view class="body">
				<scroll-view enable-flex="true" class="scroll-list">
					<div class="scroll-view">
						<div class="scroll-view" style="overflow-x: auto; overflow-y: hidden;">
							<div class="scroll-view-content">
								<view style="display: flex;">
									<view class="scroll-item" v-for="(item,index) in storeList" :key="index">
										<view class="item-row">
											<image class="scroll-img" :src="item.image">
											</image>
											<text class="amount-text">满{{item.pay_fee}}得{{item.cash_back}}
											</text>
										</view>
										<view class="item-row">
											<text class="scroll-name overflow-hidden">
												{{item.name}}</text>
										</view>
										<view class="item-row">
											<text class="stock-text">还剩<text class="stock">{{item.stock}}</text>
												份</text>
										</view>
									</view>
									
								</view>
							</div>
						</div>
					</div>
				</scroll-view>
			</view>
			<!-- <view class="body">
				<scroll-view enable-flex="true" class="scroll-list">
					<div class="scroll-view">
						<div class="scroll-view" style="overflow-x: auto; overflow-y: hidden;">
							<div class="scroll-view-content">
								<view style="display: flex;">
									<view class="scroll-item" v-for="(item,index) in storeList" :key="index">
										<view class="item-row">
											<image class="scroll-img" :src="item.image">
											</image>
											<text class="top-left">满{{item.pay_fee}}返{{item.cash_back}}
											</text>
											<text class="bottom-right">{{item.street}}
											</text>
										</view>
										<view class="item-row">
											<text class="scroll-name overflow-hidden">
												{{item.name}}</text>
										</view>
										<view class="item-row flex-y-center">
											<image src="@/static/img/meishi.png"
												style="width: 10px;height: 9px;margin-right: 2px;"></image>
											<view class="stock-text" style="color: #999;">剩余{{item.stock}}份</view>
										</view>
										<view class="item-row flex-x-end">
											<view class="button">立即抢购</view>
										</view>
									</view>

								</view>
							</div>
						</div>
					</div>
				</scroll-view>
			</view> -->
		</navigator>
		<!-- 优选商家 -->
		<navigator url="/pages/storeList/storeList?tag=3" hover-class="none" class="limit-store-container">
			<view class="header" style="text-align: center;font-size: 18px;line-height:36px;display: block;">
				{{tag_2.name}}
				<!-- <image class="header-icon" style="width: 96px;" :src="tag_3.image">
				</image>
				<view class="right">
					<text class="more-text">查看更多</text>
					<image style="width: 15px; height: 15px;" src="@/static/img/arrowBlack.png">
					</image>
				</view> -->
			</view>
			<view class="body">
				<scroll-view enable-flex="true" class="scroll-list">
					<div class="scroll-view">
						<div class="scroll-view" style="overflow-x: auto; overflow-y: hidden;">
							<div class="scroll-view-content">
								<view style="display: flex;">
									<view class="scroll-item" v-for="(item,index) in storeList2" :key="index">
										<view class="item-row">
											<image class="scroll-img" :src="item.image">
											</image>
											<text class="amount-text">满{{item.pay_fee}}得{{item.cash_back}}
											</text>
										</view>
										<view class="item-row">
											<text class="scroll-name overflow-hidden">
												{{item.name}}</text>
										</view>
										<view class="item-row">
											<text class="stock-text">还剩<text class="stock">{{item.stock}}</text>
												份</text>
										</view>
									</view>
								</view>
							</div>
						</div>
					</div>
				</scroll-view>
			</view>
		</navigator>
		<!-- <navigator url="/pages/storeList/storeList?tag=2" hover-class="none" class="recommend-store-container">
			<view class="header" style="text-align: center;font-size: 18px;line-height:36px;display: block;">
				{{tag_2.name}}
			</view>
			<view class="body">
				<view class="store-item" v-for="(item,index) in storeList2" :key="index">
					<view class="item-row">
						<image class="head-img" :src="item.image">
						</image>
						<text class="amount-text">满{{item.pay_fee}}得{{item.cash_back}}</text>
					</view>
					<view class="item-row">
						<text class="item-name overflow-hidden">{{item.name}}
						</text>
					</view>
					<view class="item-row">
						<text class="stock-text">还剩<text class="stock">{{item.stock}}</text>份</text>
					</view>
				</view>
			</view>
		</navigator> -->
		
		<!-- 分类 -->
		<!-- <view class="variety-navigation">
			
			<view class="variety-swiper">
				<swiper class="menu-swiper h200" style="height: 100%;">
					
					<swiper-item v-for="(item1,index1) in cat_list" :key="index1"  class="flex swiper-iteme"
						style="position: absolute; width: 100%; height: 100%; transform: translate(100%, 0px) translateZ(0px);">
						<view class="menu-lg" @click="catChange(item2.id);"  v-for="(item2,index2) in item1" :key="index2">
							<image :src="item2.image">
							</image>
							<view class="">{{item2.name}}</view>
						</view>
						
					</swiper-item>

				</swiper>
				<view class="add-f-s">
					<view style="display: inline-block;">
						<view class="add-f-s-1"></view>
					</view>
					<view style="display: inline-block;">
						<view class="add-f-s-2"></view>
					</view>
				</view>
			</view>
			<view class="variety-text border-top">
				<view class="variety-navigation-icons flex-y-center">
					<view class="flex-y-center" style="margin-right: 9px;" @click="juliChange()">
						<view>距离</view>
						<image src="@/static/img/jiang.png" class="variety-image"
							:class="[juliup==true?'arrowup':'arrowdown']">
						</image>
					</view>
					<view class="flex-y-center" style="margin-right: 9px;" @click="jiageChange()">
						<view>价格</view>
						<image src="@/static/img/jiang.png" class="variety-image"
							:class="[jiageup==true?'arrowup':'arrowdown']">
						</image>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 商家列表 -->
		<view>
			<view class="header" style="text-align: center;font-size: 18px;line-height:36px;display: block;margin-bottom: 10px;">
				{{tag_1.name}}
			</view>
			
			<view class="store-list">
				<view class="store-item" v-for="(item,index) in data.data_list" :key="index" @click="storeTap(index)">
					<view class="goods_brand" style="background-color: rgb(255, 215, 5);"
						v-if="item.platform=='meituan'">
						<image src="@/static/img/meituan1.png">
						</image>
						<text class="name">美团</text>
					</view>
					<view class="goods_brand" style="background-color: rgb(33, 149, 255);"
						v-if="item.platform=='eleme'">
						<image src="@/static/img/elm1.png">
						</image>
						<text class="name">饿了么</text>
					</view>
					<view style="padding: 9px 12px;position: relative;overflow: hidden;z-index: 7;background: #fff;">
						<view class="rules-num" v-if="item.activity_count>1">
							<text><span>活动数{{item.activity_count}}</span></text>
						</view>
						<view class="head-item border-bottom info-item">
							<view class="item-left">
								<view class="mask" v-if="item.status=='2'">
									<image src="@/static/img/weizhifu.png" class="mask-img">
									</image>
								</view>
								<view class="mask" v-if="item.stock<=0">
									<image src="@/static/img/out-of-stock.png" class="mask-img">
									</image>
								</view>
								<image class="head-img" :src="item.image">
								</image>
							</view>
							<view class="item-right">
								<view class="item">
									<view class="title">{{item.name}}</view>
								</view>
								<view class="item">
									<view>还剩<text class="stock-text">
											{{item.stock}}</text>份</view>
									<view class="progress">
										<progress :percent="item.percent" activeColor="rgb(255, 150, 42)"
											stroke-width="8" border-radius="16"
											backgroundColor="rgba(255, 150, 42, 0.5)">
										</progress>

									</view>
								</view>
								<view class="item">
									<view class="distance-text">{{item.distance?'距离：'+item.distance:''}}</view>
									<view class="time-region">可报名 {{item.open_start}}-{{item.open_end}}</view>
								</view>
							</view>
						</view>
						<view class="head-item border-bottom cashback-item">
							<!-- <view class="icon discount-text">送</view> -->
							<view class="text">会员满<text class="amount">
									{{item.vip_pay_fee}}</text>奖<text class="amount">
									{{item.vip_cash_back}}</text>
							</view>
							<view class="text">非会员满<text class="amount">
									{{item.pay_fee}}</text>奖<text class="amount">
									{{item.cash_back}}</text>
							</view>
						</view>
						<view class="head-item border-bottom address-item">
							<image class="icon" src="@/static/img/address-gray-ico.png">
							</image>
							<view class="address-text">{{item.address}}</view>
						</view>
					</view>
				</view>
			</view>

			<view style="text-align:center;margin-top:120rpx" v-if="data.no_list">
				<view style="color:#444">暂无数据</view>
			</view>
			<view class="flex-y-center flex-x-center"
				style="text-align: center;height: 74rpx;color: #888;font-size: 9pt" v-if="!data.no_list&&data.no_more">
				没有更多了~</view>
			<view style="text-align: center;height: 174rpx;color: #888;font-size: 9pt"
				class="flex-y-center flex-x-center" v-if="!data.no_list&&!data.no_more">
				加载中...
			</view>

		</view>
		<my-kefu></my-kefu>
	</view>
</template>

<script>
	import myKefu from '../../pages/publicService/publicService.vue';
	const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
	import {
		getStoreList,
		getWxConfig,
		getIndexData
	} from '../../apirequest/api.js';
	
	export default {
		components: {
			myKefu: myKefu
		},
		data() {
			return {
				lock: 0,
				address: '',
				lat: '',
				lng: '',
				distance: '',
				banner: [],
				nav_list: [],
				cat_list: [],
				currentIndex: 0,
				tag_1: [],
				tag_2: [],
				tag_3: [],
				// 一元霸王餐商家
				storeList: [],
				// 优选商家
				storeList2: [],
				// 全部商家
				storeList3: [],
				juliup: false,
				jiageup: false,
				cat_id: 0,
				sort: 0,
				data: {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},
				hongbao:[],
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function(t) {
			var o = this;
			o.loadDataList(function() {
				o.data.loading_more = !0;
			});
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			
			let longitude = uni.getStorageSync('longitude');
			let latitude = uni.getStorageSync('latitude');
			let address = uni.getStorageSync('address');
			let that = this;
			that.address = address;
			
			if (!longitude || !latitude || !address) {
				uni.getLocation({
					success: function(res) {
						console.log(res);
						if (!res.latitude || !res.longitude) {
							uni.showToast({
								title: '定位失败，请手动定位',
								icon: 'error'
							});
							setTimeout(function(){
								window.location.href = 'https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=https://fanpinsanguo.yuyatou.cn/h5&key=KJKBZ-PRNK2-S4HUQ-CF4BG-MS6HT-5HBJA&referer=%E9%A5%AD%E5%93%81%E4%B8%89%E5%9B%BD';
							},1000);
							return;
						}
						/* uni.showModal({
							title: '提示',
							content: JSON.stringify(res),
							success(ret) {
								if (ret.confirm) {
									
								}
								if (ret.cancel) {
						
								}
							}
						}); */
						that.getLocal(res.latitude, res.longitude, function() {
							that.lat = res.latitude;
							that.lng = res.longitude;
							uni.setStorageSync('longitude', res.longitude);
							uni.setStorageSync('latitude', res.latitude);
							that.loadDataList();
						});
					},
					cancel: function(res) {
						uni.showToast({
							title: '用户拒绝授权获取地理位置',
							icon: 'error'
						});
					}
				});
			} else {
				that.loadData();
				if (longitude != that.lng || latitude != that.lat) {
					that.lat = latitude;
					that.lng = longitude;
					that.data = {
						data_list: [],
						no_list: !1,
						no_more: !1,
						current_page: 0,
						loading_more: !0,
					};
					that.loadDataList();
				}
			}
		},
		onLoad(options) {
			console.log(options);
			let that = this;
			if (options.pid) {
				uni.setStorageSync('parent_id', options.pid)
			}
			//?name=我的位置&latng=22.547,114.085947&addr=深圳市&city=深圳市&module=locationPicker#/
			let latng = this.getUrlParam('latng');
			console.log(latng);
			if (latng) {
				let latng_arr = latng.split(',');
				let address = that.getUrlParam('name');
				console.log(address)
				uni.setStorageSync('longitude', latng_arr[1]||'');
				uni.setStorageSync('latitude', latng_arr[0]||'');
				uni.setStorageSync('address', address);
				
				that.lat = latng_arr[0]||'';
				that.lng = latng_arr[1]||'';
				that.address = address;
			} else {
				that.lat = uni.getStorageSync('latitude');
				that.lng = uni.getStorageSync('longitude');
				that.address = uni.getStorageSync('address');
			}
			that.loadData();
		},
		methods: {
			getUrlParam(name){
			    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			　　var r = window.location.search.substr(1).match(reg);
				console.log(r);
			　　if (r != null) return decodeURI(r[2]); return null;
			},
			//跳转到地图
			gotoMap(){
				window.location.href = 'https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=https://fanpinsanguo.yuyatou.cn/h5&key=KJKBZ-PRNK2-S4HUQ-CF4BG-MS6HT-5HBJA&referer=%E9%A5%AD%E5%93%81%E4%B8%89%E5%9B%BD';
			},
			hongbao_url(url){
				if (url) {
					window.location.href = url;
				}
			},
			getMapLocation(){
				let that = this;
				uni.chooseLocation({
					success:(res)=> {
						console.log(res);
						uni.setStorageSync('longitude',res.longitude);
						uni.setStorageSync('latitude',res.latitude);
						uni.setStorageSync('address',res.name);
						that.data = {
							data_list: [],
							no_list: !1,
							no_more: !1,
							current_page: 0,
							loading_more: !0,
						}
						that.lat = res.latitude;
						that.lng = res.longitude;
						that.address = res.name;
						that.loadDataList();
					},
					fail:()=>{
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								console.log(res);
								var status = res.authSetting;
								if(!status['scope.userLocation']){
								// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title:"是否授权当前位置",
										content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success:(tip)=>{
											if(tip.confirm){
											// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success:(data)=>{
													// 如果用户授权了地理信息在，则提示授权成功
														if(data.authSetting['scope.userLocation']===true){
															uni.showToast({
																title:"授权成功",
																icon:"success",
																duration:1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (res) => {
																	console.log("详细地址",res);
																	uni.setStorageSync('longitude',res.longitude);
																	uni.setStorageSync('latitude',res.latitude);
																	uni.setStorageSync('address',res.name);
																	that.data = {
																		data_list: [],
																		no_list: !1,
																		no_more: !1,
																		current_page: 0,
																		loading_more: !0
																	}
																	that.lat = res.latitude;
																	that.lng = res.longitude;
																	that.address = res.name;
																	that.loadDataList();
																}
															})
														}else{
															uni.showToast({
																title:"授权失败",
																icon:"none",
																duration:1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title:"调用授权窗口失败",
									icon:"none",
									duration:1000
								})
							}
						})
					}
				});
			},
			jumpUrl(item) {
				/* console.log(item) */
				//自定义链接
				if (parseInt(item.links_id) == 1 && item.url) {
					window.location.href = item.url;
				}
				if (parseInt(item.links_id) > 0 && item.links) {
					let url = item.links.url;
					if (parseInt(item.param_id) > 0) {
						url = url + item.param_id;
					}
					console.log(url)
					uni.navigateTo({
						url: '' + url + '',
					});
				}
			},
			// 获取当前地理位置
			getLocal(latitude, longitude, callback) {
				var data = {
					location: latitude + "," + longitude,
					/*换成自己申请的key*/
					key: "KJKBZ-PRNK2-S4HUQ-CF4BG-MS6HT-5HBJA",
					get_poi: 0,
					output: 'jsonp',
				}
				var url = "https://apis.map.qq.com/ws/geocoder/v1/?";
				var that = this;
				//jsonp请求
				this.$jsonp(url, data).then(res => {
						console.log('+++++++++++', res);
						that.address = res.result.address_component.street;
						uni.setStorageSync('address', that.address);
						callback && callback(res);
					})
					.catch(error => {
						console.log(error);
					})
			},

			//获取数据
			loadData: function() {
				getIndexData({}).then((res) => {
					if (res.code == 1) {
						this.banner = res.data.banner;
						this.cat_list = res.data.cat_list;
						this.nav_list = res.data.nav_list;
						this.storeList = res.data.storeList;
						this.storeList2 = res.data.storeList2;
						this.tag_1 = res.data.tag_1;
						this.tag_2 = res.data.tag_2;
						this.tag_3 = res.data.tag_3;
						this.hongbao = res.data.hongbao;
					}
				}).catch(err => {
					console.log(err)
				})

			},

			//获取数据列表
			loadDataList: function(f) {
				var o = this;
			    if (!o.lat || !o.lng) {
					return;
				} 
				if (o.lock) {
					return;
				}
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
					var page = (o.data.current_page || 0) + 1;
					let longitude = uni.getStorageSync('longitude');
					let latitude = uni.getStorageSync('latitude');
					var data = {
						page: page,
						latitude: latitude,
						longitude: longitude,
						category_id: o.cat_id,
						juliup: o.juliup ? 1 : 0,
						jiageup: o.jiageup ? 1 : 0,
						sort: o.sort,
						tag_id:1,
					}
					o.lock = 1;
					console.log(o.lock)
					getStoreList(data).then((t) => {
						if (t.code == 1) {
							if (1 == t.data.current_page && !t.data.data.length) {
								o.data.no_list = !0;
								o.data.loading_more = !1
							}
							if (t.data.data && t.data.data.length) {
								o.data.data_list = o.data.data_list || [];
								o.data.data_list = o.data.data_list.concat(t.data.data),
									o.data.current_page = page;
							}
							if (!t.data.has_more) {
								o.data.no_more = !0;
							}

						} else {
							uni.showToast({
								title: '网络繁忙',
								icon: 'error'
							})
						}
						o.lock = 0;
					});
				}
			},
			storeTap(index) {
				let this_item = this.data.data_list[index];
				if (!this_item) {
					return;
				}
				if (parseInt(this_item.open_buy) == 0) {
					let time = this_item.open_start + "-" + this_item.open_end;
					uni.showToast({
						icon: 'none',
						title: '未到报名时间，报名时间' + time,
						duration: 2000
					});

				} else if (parseInt(this_item.stock) <= 0) {
					uni.showToast({
						icon: 'none',
						title: '今日名额已抢光',
						duration: 2000
					})
				} else {
					this.distance = this_item.distance;
					uni.navigateTo({
						url: '/pages/details/details?id=' + this_item.store_id
					})
				}

			},
			cIndex(e) {
				this.currentIndex = e.detail.current
			},
			catChange(id) {
				this.cat_id = id;
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			juliChange() {
				if (this.juliup == false) {
					this.juliup = true
				} else {
					this.juliup = false
				}
				this.sort = 1
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			jiageChange() {
				if (this.jiageup == false) {
					this.jiageup = true
				} else {
					this.jiageup = false
				}
				this.sort = 2
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f7f8fa;
		font-size: 0.75rem;
	}

	.head {
		background: #ff8546;
		color: #fff;
		position: fixed;
		padding: 25upx;
		font-size: 0.95rem;
		width: 100%;
		z-index: 99;
		top: 0;
		left: 0;
	}

	.head .dwicon {
		width: 45upx;
		height: 45upx;
		margin-right: 10upx;
	}

	.head .icon {
		width: 30upx;
		height: 30upx;
		margin-left: 8upx;
	}

	.placeholder {
		width: 100%;
		height: 94upx;
	}

	.search {
		margin: 20upx 25rpx;
		border: 1px solid #fce072;
		border-radius: 40upx;
		padding: 10upx;

	}

	.search .icon {
		width: 40upx;
		height: 40upx;
	}

	.banner {
		height: 320rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		z-index: 999;
	}

	.banner .banner-container {
		width: 100%;
		height: 350rpx;
	}

	.banner .slide-image {
		position: absolute;
		height: 260rpx;
		width: 98%;
		border-radius: 10rpx;
		z-index: 5;
		opacity: 0.7;
		/*透明度*/
		top: 6%;
	}

	.banner .active {
		opacity: 1;
		z-index: 10;
		height: 320rpx;
		width: 98%;
		border-radius: 10rpx;
		top: 0%;
		transition: all 0.2s ease-in 0s;
	}



	.overflow-hidden {
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1
			/* 这里设置需要显示几行文本 */
		;
	}

	.recommend-store-container {
		background-color: #fff;
		margin: 9px 14px;
		font-size: 24rpx;
		border-radius: 9px
	}

	.recommend-store-container .header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 9px;
		border-radius: 9px 9px 0 0;
		background: linear-gradient(180deg, #fff0e9 0, #fff)
	}

	.recommend-store-container .header .left .header-icon {
		height: 14px
	}

	.recommend-store-container .header .right {
		display: flex;
		align-items: center
	}

	.recommend-store-container .header .right .more-text {
		color: #bec1c7
	}

	.recommend-store-container .body {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 9px
	}

	.recommend-store-container .body .store-item {
		display: flex;
		flex-flow: column;
		position: relative;
	}

	.recommend-store-container .body .store-item .item-row {
		margin-bottom: 4px;
		position: relative
	}

	.recommend-store-container .body .store-item .item-row .head-img {
		width: 153px;
		height: 115px;
		border-radius: 7px
	}

	.recommend-store-container .body .store-item .item-row .item-name {
		width: 153px;
		font-size: 28rpx;
		;
		font-weight: 700
	}

	.recommend-store-container .body .store-item .item-row .stock-text {
		font-size: 10px
	}

	.recommend-store-container .body .store-item .item-row .stock {
		color: #f96456
	}

	.recommend-store-container .body .store-item .item-row .amount-text {
		font-size: 24rpx;
		color: #fff;
		border-radius: 0 7px 0 7px;
		background: linear-gradient(270deg, #ff8826 0, #ed3066);
		position: absolute;
		padding: 2px 4px;
		text-align: center;
		bottom: 0;
		left: 0
	}

	.variety-navigation {
		margin: 9px 14px;
		background-color: #fff;
		border-radius: 9px
	}

	.variety-navigation .variety-swiper {
		height: 86px;
		background-color: #fff;
		font-size: 24rpx;
		border-radius: 9px;
		padding: 7px 0
	}

	.variety-navigation .variety-swiper .menu-lg {
		width: 20%;
		display: flex;
		flex-flow: column;
		align-items: center
	}

	.variety-navigation .variety-swiper .menu-lg image {
		width: 48px;
		height: 48px;
		border-radius: 9px
	}

	.variety-navigation .variety-swiper .menu-lg .active {
		color: #f42f2f
	}

	.variety-navigation .variety-swiper .add-f-s {
		text-align: center;
		position: relative;
		left: 0;
		right: 0;
		top: -19px
	}

	.add-f-s-1 {
		width: 14px;
		height: 7px;
		border-radius: 15px;
		background-color: #ff8546;
	}

	.add-f-s-2 {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background-color: rgba(253, 211, 41, .5);
		margin: 0px 2px;
	}

	.variety-text {
		padding: 14px;
		color: #afb0b1;
		font-size: 12px
	}

	.variety-text .arrowup {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg)
	}

	.variety-text .variety-image {
		margin: 0px 4px;
		width: 12px;
		height: 12px
	}

	.commodity {
		margin: 9px 14px;
		background-color: #fff;
		border-radius: 9px
	}

	/* 主题色 */
	.meituan {
		color: #333 !important;
		background-color: #ff8546
	}

	.elem {
		color: #fff !important;
		background-color: #00a9e9
	}

	.amount {
		color: #f96456;
		font-weight: 700;
		margin: 0 2px
	}

	.store-list {
		display: flex;
		flex-flow: column
	}

	.store-list .store-item {
		border-radius: 9px;
		background-color: #fff;
		margin: 0 40px 9px 14px;
		// padding: 9px 12px;
		position: relative;
		z-index: 8;
		background: #fff;
		/* 信息项 */
		/* 返现项 */
		/* 更多项 */
		/* 地址项 */
		/* 底部项 */
	}

	.store-list .store-item .goods_brand {
		width: 43px;
		border-radius: 0px 7px 7px 0px;
		position: absolute;
		top: 0px;
		right: -31px;
		z-index: 7;
		height: 100%;
	}

	.store-list .store-item .goods_brand image {
		width: 21px;
		height: 21px;
		margin-top: 9px;
		margin-left: 18px;
	}

	.store-list .store-item .goods_brand .name {
		display: block;
		width: 16px;
		position: absolute;
		top: 38px;
		right: 8px;
		line-height: 1.4em;
		word-wrap: break-word;
		font-size: 16px;
		font-weight: 600;
		color: #fff;
	}

	.store-list .store-item .head-item {
		display: flex;
		padding: 4px 0
	}

	.store-list .store-item .rules-num {
		position: absolute;
		background: linear-gradient(270deg, #ec5151 0, #ff5e3c 45%, #ffb15f);
		color: #fff;
		font-size: 9px;
		padding: 2px 14px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 7px;
		right: -15px
	}

	.store-list .store-item .info-item {
		padding-top: 0
	}

	.store-list .store-item .info-item .item-left {
		position: relative
	}

	.store-list .store-item .info-item .item-left .region-name {
		position: absolute;
		top: -2px;
		right: -1px;
		color: #fff;
		font-size: 24rpx;
		border-radius: 15px 0 0 15px;
		width: 42px;
		height: 15px;
		text-align: center
	}

	.store-list .store-item .info-item .item-left .mask {
		width: 100%;
		height: 57px;
		border-radius: 7px;
		background-color: rgba(0, 0, 0, .7);
		position: absolute;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.store-list .store-item .info-item .item-left .mask .mask-img {
		width: 57px;
		height: 28px
	}

	.store-list .store-item .info-item .item-left .head-img {
		width: 76px;
		height: 57px;
		display: block;
		border-radius: 9px
	}

	.store-list .store-item .info-item .item-right {
		margin-left: 9px;
		width: 100%;
		display: flex;
		flex-flow: column
	}

	.store-list .store-item .info-item .item-right .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx
	}

	.store-list .store-item .info-item .item-right .item .title {
		color: #333;
		font-size: 34rpx;
		;
		font-weight: 700
	}

	.store-list .store-item .info-item .item-right .item .stock-text {
		color: #ff962a;
		font-weight: 700;
		font-size: 28rpx;
		;
		margin: 0 7px
	}

	.store-list .store-item .info-item .item-right .item .progress {
		width: 125px
	}

	.store-list .store-item .info-item .item-right .item .distance-text {
		color: #bec1c7
	}

	.store-list .store-item .info-item .item-right .item .time-region {
		width: 125px;
		padding: 1px 0;
		color: #fff;
		background-color: #8fc926;
		text-align: center;
		border-radius: 1px
	}

	.store-list .store-item .cashback-item {
		justify-content: space-between;
		align-items: center
	}

	.store-list .store-item .cashback-item .icon {
		width: 19px;
		height: 19px
	}

	.store-list .store-item .cashback-item .discount-text {
		background-color: #f96456;
		color: #fff;
		border-radius: 4px;
		text-align: center;
		line-height: 19px;
		font-size: 12px
	}

	.store-list .store-item .cashback-item .text {
		color: #333;
		font-size: 24rpx
	}

	.store-list .store-item .more-item {
		align-items: center;
		justify-content: center
	}

	.store-list .store-item .more-item .more-text {
		color: #bec1c7;
		font-size: 24rpx;
		margin-right: 7px
	}

	.store-list .store-item .address-item .icon {
		width: 19px;
		height: 19px
	}

	.store-list .store-item .address-item .address-text {
		color: #bec1c7;
		font-size: 24rpx;
		margin-left: 7px
	}

	.store-list .store-item .footer-item {
		padding-bottom: 0;
		color: #f96456;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.menu-navigation {
		height: 100px;
		background-color: #fff;
		margin: 9px 14px;
		font-size: 24rpx;
		border-radius: 9px
	}

	.menu-navigation .menu-lg {
		width: 25%;
		display: flex;
		flex-flow: column;
		align-items: center
	}

	.menu-navigation .menu-lg image {
		width: 100rpx;
		height: 100rpx;
		margin: 15rpx 0;
	}

	.menu-navigation .menu-spot {
		width: 4px;
		background-color: #ff8546;
		padding: 3px 4px;
		border-radius: 3px;
		margin-top: 9px
	}

	.menu-navigation .menu-spot-circular {
		width: 4px;
		background-color: #ff8546;
		border-radius: 50%;
		margin-top: 9px;
		margin-left: 4px
	}

	.menu-navigation .add-c-d {
		text-align: center;
		position: relative;
		left: 0;
		right: 0;
		top: -19px
	}

	.limit-store-container {
		background-color: #fff;
		margin: 9px 14px;
		font-size: 24rpx;
		border-radius: 9px
	}

	.limit-store-container .header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 9px;
		border-radius: 9px 9px 0 0;
		background: linear-gradient(180deg, #fff0e9 0, #fff)
	}

	.limit-store-container .header .header-icon {
		height: 14px
	}

	.limit-store-container .header .right {
		display: flex;
		align-items: center
	}

	.limit-store-container .header .right .more-text {
		color: #bec1c7
	}

	.limit-store-container .body .scroll-list {
		display: flex;
		align-items: center;
		width: unset;
		margin: 0 9px
	}

	.limit-store-container .body .scroll-list .scroll-item {
		display: flex;
		flex-flow: column;
		margin-top: 9px;
		margin-right: 9px
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row {
		margin-bottom: 4px;
		position: relative
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .button {
		background: linear-gradient(0deg, #cd3c20, #dc7562);
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		border-radius: 15px;
		transform: scale(0.9);
		transform-origin: right;
		padding: 4rpx 8rpx;
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .scroll-img {
		width: 93px;
		height: 69px;
		// border-radius: 7px
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .scroll-name {
		width: 93px;
		font-size: 28rpx;
		;
		font-weight: 700
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .stock-text {
		font-size: 10px
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .stock {
		color: #f96456
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .amount-text {
		font-size: 9px;
		color: #fff;
		border-radius: 0 7px 0 7px;
		background: linear-gradient(270deg, #ff8826 0, #ed3066);
		position: absolute;
		padding: 2px 4px;
		text-align: center;
		bottom: 0;
		left: 0
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .top-left {
		background-color: #fdb82d;
		font-size: 18rpx;
		color: #fff;
		width: 200rpx;
		height: 18px;
		text-align: center;
		line-height: 18px;
		position: absolute;
		top: -3px;
		left: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 0 2px;
		box-sizing: border-box;
		transform: scale(0.8);
		transform-origin: left;
	}

	.limit-store-container .body .scroll-list .scroll-item .item-row .bottom-right {
		font-size: 24rpx;
		color: #fff;
		background-color: #f95428;
		width: 60px;
		height: 18px;
		text-align: center;
		line-height: 18px;
		position: absolute;
		bottom: 0px;
		right: 0px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 0 2px;
		box-sizing: border-box;
		transform: scale(0.8);
		transform-origin: right;
	}

	.limit-store-container .body .scroll-list .scroll-foot {
		display: flex;
		flex-flow: column;
		align-items: center;
		padding: 4px;
		border-radius: 9px;
		background-color: #f0f0f0
	}

	.limit-store-container .body .scroll-list .scroll-foot .more-icon {
		width: 9px;
		height: 9px;
		padding: 2px;
		border: 1px solid #ebebeb;
		border-radius: 50%;
		margin-bottom: 4px
	}

	.limit-store-container .body .scroll-list .scroll-foot .more-text {
		-webkit-writing-mode: vertical-lr;
		writing-mode: vertical-lr;
		letter-spacing: 2px
	}

	.redPacket {
		margin: 9px 14px;
	}

	.redPacket .item {
		width: 49%;
	}

	.redPacket .item .img {
		width: 100%;
	}
</style>
